<!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script th:src="|https://code.jquery.com/jquery-1.12.4.min.js|"></script>
    <script th:src="|https://code.jquery.com/ui/1.11.4/jquery-ui.min.js|"></script>
    <script src="../public/js/message.js" th:src="@{/js/message.js}"></script>
    <link rel="stylesheet" th:href="|https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css|"/>
    <link rel="stylesheet" href="../public/css/styles.css" th:href="@{/css/styles.css}" />
    <link rel="icon" href="../public/images/favicon.ico" th:href="@{/images/favicon.ico}" />

    <style>
        .messageelement {
            margin: auto;
            border: 2px solid #dedede;
            background-color: #D7D1D0 ;
            border-radius: 5px;
            max-width: 800px;
            padding: 10px;
            margin: 10px 0;
        }

        .messageelement::after {
            content: "";
            clear: both;
            display: table;
        }

        .messageelement img {
            float: left;
            max-width: 60px;
            width: 100%;
            margin-right: 20px;
            border-radius: 50%;
        }

        .messageelement img.right {
            float: right;
            margin-left: 20px;
            margin-right:0;
        }

    </style>

</head>
<body>
<header th:replace="layout :: site-header"/>



<div class="container">
    <h2>AWS Sample Messaging Application</h2>
<div id="messages">

</div>


<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">Sender:</span>
    </div>
    <select name="cars" id="username">
        <option value="Scott">Scott</option>
        <option value="Lam">Lam</option>
    </select>
</div>

<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">Message:</span>
    </div>
    <textarea class="form-control" id="textarea" aria-label="With textarea"></textarea>
    <button type="button" onclick="pushMessage()" id="send" class="btn btn-success">Send</button>
    <button type="button" onclick="purge()" id="refresh" class="btn btn-success">Purge</button>
</div>

</div>


<!-- All of these child items are hidden and only displayed in a FancyBox ------------------------------------------------------>
<div id="hide" style="display: none">

    <div id="base" class="messageelement">
        <img src="../public/images/av2.png" th:src="@{/images/av2.png}" alt="Avatar" class="right" style="width:100%;">
        <p id="text">Sweet! So, what do you wanna do today?</p>
        <span class="time-right">11:02</span>
    </div>

</div>



    </body>
</html>
